import Box from "@/components/Box";
import Header from "@/components/Header";
import { getTranslations } from "next-intl/server";
import { FC, PropsWithChildren, ReactNode, Suspense } from "react";
import DownloadSection from "./_home/DownloadSection";

import { GroupType } from "@/api/home";
import {
    NoticePlaceHolder,
    PrizePlaceHolder,
    SwiperPlaceHolder,
} from "@/app/[locale]/(TabBar)/[[...share]]/Placeholder";
import { server } from "@/utils/server";

const TIME = 0;
const getGames = async () => {
    return server
        .request<GroupType[]>({
            url: "/v1/api/front/game_list",
            method: "POST",
            next: { revalidate: TIME },
        })
        .then((res) => {
            if (res.code === 200) return res.data;
            return [];
        });
};

export const generateMetadata = async () => {
    const t = await getTranslations("titles");
    return {
        title: t("home"),
    };
};
type Props = {
    clientWidget: ReactNode;
    swiperWidget: ReactNode;
    popupWidget: ReactNode;
    cardWidget: ReactNode;
    noticeWidget: ReactNode;
    searchWidget: ReactNode;
    prizeWidget: ReactNode;
    actionWidget: ReactNode;
    mediaWidget: ReactNode;
    sportSwiperWidget: ReactNode;
    categoryWidget: ReactNode;
    group: any;
};

const Placeholder = () => {
    return <div className={"flex justify-center"}>{/*<Loading/>*/}</div>;
};
const Layout: FC<PropsWithChildren<Props>> = async (props) => {
    const {
        children,
        swiperWidget,
        popupWidget,
        cardWidget,
        noticeWidget,
        searchWidget,
        prizeWidget,
        actionWidget,
        mediaWidget,
        sportSwiperWidget,
        clientWidget,
        categoryWidget,
    } = props;

    return (
        <>
            {clientWidget}
            <DownloadSection />
            <Header></Header>
            <main id="maincontainer" className={"main-header pb-[.6rem]"}>
                {/*弹窗*/}
                <Suspense fallback={<Placeholder />}>{popupWidget}</Suspense>
                <Box>
                    {/* swiper */}
                    <Suspense fallback={<SwiperPlaceHolder />}>{swiperWidget}</Suspense>
                </Box>
                {/* swiper下的活动 */}
                <Box none className="px-[.12rem]">
                    {cardWidget}
                </Box>
                {/* 跑马灯 */}
                <Box none className="px-[.12rem]">
                    <Suspense fallback={<NoticePlaceHolder />}>{noticeWidget}</Suspense>
                </Box>

                {/* <Box>
                       {categoryWidget}
                    </Box> */}

                {/*体育轮播*/}
                {/* <Box> {sportSwiperWidget}</Box> */}
                {/* 搜索下面的大奖展示 */}
                <Suspense fallback={<PrizePlaceHolder />}>{prizeWidget}</Suspense>

                {/* 搜索组件 */}
                {/* <Box none className="mb-[.2rem] px-[.12rem]">
                        {searchWidget}
                    </Box> */}
                {/* tabs 和 游戏列表 */}
                <Suspense fallback={<PrizePlaceHolder />}>{children}</Suspense>

                {/*媒体*/}
                <Box none className="mt-[.2rem]">
                    <Suspense fallback={<Placeholder />}>{mediaWidget}</Suspense>
                </Box>
                {/* {React.Children.map(children,(child:any)=>{
                    console.log(child)
                    return React.cloneElement(child,{sass:'asdasadsadsadasds'} )

                })} */}
                {/* {React.cloneElement(children,{group})} */}
                {/*底部信息*/}
                <Suspense fallback={<Placeholder />}>{actionWidget}</Suspense>
            </main>
        </>
    );
};

export default Layout;